import React, { useState, useEffect } from 'react'
import { View, Image, Button } from '@tarojs/components'
import { AtSearchBar, AtRadio, AtNoticebar, AtPagination } from "taro-ui"
import Taro from '@tarojs/taro'

import useModel from 'flooks';
import store from '../../../stores/index'

import './index.less'
import "taro-ui/dist/style/components/list.scss";
import "taro-ui/dist/style/components/search-bar.scss";
import "taro-ui/dist/style/components/button.scss";
import "taro-ui/dist/style/components/radio.scss";
import "taro-ui/dist/style/components/icon.scss";
import "taro-ui/dist/style/components/noticebar.scss";
import "taro-ui/dist/style/components/pagination.scss";

import api from '../../../http/api'
const { nsTelList } = api


export default (props: any) => {
  const info: any = Taro.getStorageSync('info')
  const uSchoolId = info ? JSON.parse(info).userInfo.uSchoolId : 0

  const {
    price,
    telType,
    infoList,
  } = props

  const { nsOrderParams, nsOrderParamsChange } = useModel(store.nsOrderParams, ['nsOrderParams'])
  const { schoolType,postage } = nsOrderParams
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [total, setTotal] = useState(0)
  // 资费列表
  const infoListArr = []
  infoList.split('|').map((item)=>{
    infoListArr.push({ label: item, value: item})
  })

  // 是否展示选号模块
  const showTel = (parseInt(telType) === 1 && schoolType > 0) || (parseInt(telType) === 2 && schoolType > 0) || telType > 2
  // 号码段类型  type     1电信  2联通温泉  3移动温泉 4移动咸安 5联通咸安
  // 选号类型    telType  1移动  2联通   3电信  
  const type = (schoolTypes) => {
    let typeNum
    switch (parseInt(telType)) {
      case 1:
        typeNum = parseInt(schoolTypes) === 1 ? 3 : 4
        break;
      case 2:
        typeNum = parseInt(schoolTypes) === 1 ? 2 : 5
        break;
      case 3:
        typeNum = 1
        break;
      default:
        break;
    }
    return typeNum;
  }
  const [list, setList] = useState([])
  const [tel, setTel] = useState('')

  const getList = (params: any) => {
    nsTelList(params).then((res: any) => {
      const { list, total } = res.data
      setList(list)
      setTotal(total)
    })
  }

  useEffect(() => {
    nsOrderParamsChange({
      name: '',
      studentNum: '',
      telInput: '',
      height: '',
      weight: '',
      size: '',
      tel: '',
      schoolType: 0,
      postage:'',
      idCard:'',
    })
    if (showTel) {
      getList({
        uSchoolId,
        tel,
        type: type(schoolType),
        pageNo,
        pageSize
      })
    }
  }, [])

  const onChange = (e) => {
    setTel(e)
  }

  // 点击搜索
  const onActionClick = () => {
    getList({
      uSchoolId,
      tel,
      type: type(schoolType),
      pageNo: 1,
      pageSize
    })
    setPageNo(1)
    const _formData = { ...nsOrderParams }
    _formData.tel = ''
    nsOrderParamsChange(_formData)
  }
  // 选中号码
  const telLiClick = (item: any, i) => {
    const listNow = [...list]
    listNow.map((ite: any, i: number) => {
      ite.active = false
    })
    listNow[i].active = true
    const _formData = { ...nsOrderParams }
    _formData.tel = listNow[i].tel
    nsOrderParamsChange(_formData)
    setList(listNow)
  }

  // 点击校区
  const radioClick = (e) => {
    const _formData = { ...nsOrderParams }
    _formData.schoolType = e
    _formData.tel= ''
    nsOrderParamsChange(_formData)
    getList({
      uSchoolId,
      tel,
      type: type(e),
      pageNo,
      pageSize
    })
  }

  const postageClick = (e) => {
    const _formData = { ...nsOrderParams }
    _formData.postage = e
    nsOrderParamsChange(_formData)
  }

  // 页码改变
  const onPageChange = (e: any) => {
    getList({
      uSchoolId,
      tel,
      type: type(schoolType),
      pageNo: e.current,
      pageSize
    })
    setPageNo(e.current)
    const _formData = { ...nsOrderParams }
    _formData.tel = ''
    nsOrderParamsChange(_formData)
  }




  return (
    <View className='telChoice'>
      {
        parseInt(telType) !== 3 && <View>
          <AtNoticebar>请选择校区后挑选号码</AtNoticebar>
          <AtRadio
            options={[
              { label: '温泉校区', value: 1 },
              { label: '咸安校区', value: 2 },
            ]}
            value={schoolType}
            onClick={(e) => { radioClick(e) }}
          />
        </View>
      }

      {
        showTel && <View>

          <View>
            <AtNoticebar>请选择资费信息</AtNoticebar>
            <AtRadio
              options={infoListArr}
              value={postage}
              onClick={(e) => { postageClick(e) }}
            />
          </View>
          <AtSearchBar
            className='search'
            value={tel}
            onChange={onChange}
            onActionClick={onActionClick}
          />
          {
            list.length ? <View className='telUl'>
              {
                list.map((item, i) => (
                  <View onClick={() => { telLiClick(item, i) }} className={item.active ? 'telLi active' : 'telLi'} key={i}>{item.tel}</View>
                ))
              }
            </View> : <View className='telUlNo'>暂无号码</View>
          }

          <AtPagination
            icon
            total={total}
            pageSize={pageSize}
            current={pageNo}
            onPageChange={onPageChange}
          >
          </AtPagination>
          <View className='result'>
            <View className="left">已选号码：{nsOrderParams.tel}</View>
            <View className="right">应付款：{nsOrderParams.tel ? `￥${price}` : ''}</View>
          </View>
        </View>
      }

    </View>
  )
}
